<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Killing four fairy</title>
    <style>
        body {
            background-image: url(团队网站背景图.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 100%;
        }
        
        .Q {
            position: relative;
            height: 1000px;
            display: flex;
        }
        
        .I {
            position: absolute;
            left: 10px;
            position: fixed;
        }
        
        .X {
            position: absolute;
            left: 1300px;
            top: 550px;
            width: 100px;
            height: 100px;
            background-color: honeydew;
            transform: rotate(45deg);
            animation: move 2s infinite reverse;
            position: fixed;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            30% {
                transform: rotate(90deg);
                background-color: khaki;
            }
            60% {
                transform: rotate(180deg);
                background-color: lavenderblush;
            }
            80% {
                transform: rotate(270deg);
                background-color: lightblue;
            }
        }
        
        .O {
            position: absolute;
            text-align: center;
            left: 400px;
            top: 170px;
            transition: all 0.5s;
        }
        
        .O:hover {
            transform: scale(1.5, 1.5);
        }
        
        .Y {
            position: absolute;
            top: 400px;
            left: 550px;
            text-align: center;
            background-color: azure;
            width: 400px;
            height: 80px;
            border-radius: 40px;
        }
        
        .W {
            position: relative;
        }
        
        .E {
            position: absolute;
            width: 18px;
            height: 18px;
            background-color: bisque;
            border-radius: 9px;
            left: 730px;
            top: 600px;
            animation: art 3s infinite reverse;
            text-align: center;
        }
        
        .R {
            position: absolute;
            width: 18px;
            height: 18px;
            background-color: bisque;
            border-radius: 9px;
            left: 730px;
            top: 620px;
            animation: art 3s infinite reverse;
        }
        
        .T {
            position: absolute;
            width: 18px;
            height: 18px;
            background-color: bisque;
            border-radius: 9px;
            left: 730px;
            top: 640px;
            animation: art 3s infinite reverse;
        }
        
        @keyframes art {
            0% {
                transform: translate(0, 0);
            }
            30% {
                transform: translate(0, 10px);
            }
            60% {
                transform: translate(0px, -10px);
            }
        }
        
        .P {
            text-align: center;
            height: 1000px;
            padding-top: 100px;
        }
        
        .S {
            display: inline-block;
            margin-top: 80px;
        }
        
        .D {
            text-align: center;
            display: inline-block;
            margin-right: 50px;
            transition: all 0.5s;
        }
        
        .D:hover {
            transform: scale(1.5, 1.5);
        }
        
        .F {
            text-align: center;
            display: inline-block;
            margin-right: 50px;
            transition: all 0.5s;
        }
        
        .F:hover {
            transform: scale(1.5, 1.5);
        }
        
        .G {
            text-align: center;
            display: inline-block;
            margin-right: 50px;
            transition: all 0.5s;
        }
        
        .G:hover {
            transform: scale(1.5, 1.5);
        }
        
        .H {
            text-align: center;
            display: inline-block;
            margin-right: 50px;
            transition: all 0.5s;
        }
        
        .H:hover {
            transform: scale(1.5, 1.5);
        }
        
        .G a {
            display: inline;
        }
        
        .J {
            height: 800px;
        }
        
        .K {
            text-align: center;
        }
        
        .C {
            text-align: center;
        }
        
        .V {
            display: inline-block;
        }
        
        .B {
            display: inline-block;
        }
        
        .N {
            display: inline-block;
            margin-left: 100px;
            text-align: left;
        }
        
        .M {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="Q">

        <div class="I">

            <h3 style="font-family: 华文琥珀; font-size: 45px;color: rgb(231, 237, 252);">K F F</h3>
        </div>
        <div class="X"></div>
        <div class="O">
            <h1 style="font-family: 方正粗黑; font-size: 90px;color: azure;">Killing Four Fairy</h1>
        </div>
        <div class="Y">
            <p style="font-family: 方正粗黑宋简体;font-size: 25px;color: rgb(66, 70, 70);">Welcome to watch</p>
        </div>
        <div class="U">

        </div>
        <div class="W">
            <div class="E">
                <a href="#1"> T</a>
            </div>
            <div class="R"></div>
            <div class="T"></div>
        </div>
    </div>
    <div class="P">
        <div class="A">
            <a id="1" style="font-family: 方正粗黑; font-size: 50px;color: honeydew;">T E A M</a>
        </div>
        <div class="S">
            <p style="font-family: 方正粗黑宋简体; font-size: 30px; color: azure;">We are a group of <br> good young people who <br> love life, love the <br> people and strictly <br> follow the core socialist values.</p>
            <div class="D">
                <img src="雨儿.jpg" alt="" height="200px">
                <h2 style="color: honeydew;">
                    <a href="http://joyful-rain.gitee.io/final-project-">罗欣雨 </a> </h2>
                <p style="color: honeydew;">editor</p>
            </div>
            <div class="F"><img src="曦儿.png" alt="" height="200px">
                <h2 style="color: honeydew;">
                    <a href="http://liu-yuxii.gitee.io/personal-website"> 刘羽曦 </a></h2>
                <p style="color: honeydew;">image collection</p>
            </div>
            <div class="G"> <img src="本人.jpg" alt="" height="200px">
                <h2 style="color: honeydew;">
                    <a href="http://tiantainchiji.gitee.io/personal-web-sites"> 曾沙 </a></h2>
                <p style="color: honeydew;">the code editor</p>
            </div>
            <div class="H"><img src="谭儿.jpg" alt="" height="200px">
                <h2 style="color: honeydew;"> <a href="http://tan-zhouxin.gitee.io/personal-website-design/"> 谭周欣 </a></h2>
                <p style="color: honeydew;">view map</p>
            </div>
        </div>
    </div>
    <div class="J">
        <div class="K">
            <p style="font-family: 方正粗黑;font-size: 50px;color:honeydew;">A B O U T</p>
            <div class="L">
                <div class="Z">
                    <p style="font-family: 方正粗黑宋简体;font-size: 30px;color: honeydew;">Can lovely love four sisters</p>

                    <img src="四人.jpg" alt="" height="400px">
                </div>

            </div>
        </div>
    </div>
    <div class="C">
        <p style="font-family: 方正粗黑; font-size: 50px; color: honeydew;">WE CAN</p>
        <div class="V">
            <img src="PS.png" alt="">
        </div>
        <div class="B">
            <img src="AI.png" alt="">
        </div>
        <div class="N">
            <p style="font-family: 方正粗黑宋简体;font-size: 30px;color: rgb(240, 239, 217);">
                We have learned a lot of professional <br> knowledge, such as three-dimensional <br> composition, layout design, <br> illustration, user experience, <br> mobile APP interface design, <br> web design, and we will <br> learn Ae in the future.</p>
        </div>

    </div>
    <div class="M">
        <p style="font-family: 方正粗黑;font-size: 70px;color: ivory;">Contact us</p>
        <div class="q">
            <p style="font-family: 方正粗黑宋简体;font-size: 20px;color: lightgoldenrodyellow;">--QQ--WECHAT--PHONE--</p>
            <div class="w">
                <p style="color: lightgoldenrodyellow;"> 2780292912-zjengqdbj12-82503</p>
            </div>
        </div>
    </div>
</body>

</html>